<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>列表渲染</title>
    <script type="text/javascript" src="js/vue.js"></script>
  </head>
  <body>
    <div id="app">

      <button @click="updateZS">更新张三的信息</button>
      <ul>
        <li v-for="(p,index) in persons" :key="index">{{p.name}} - {{p.age}}</li>
      </ul>

    </div>

    <script type="text/javascript">
      new Vue({
        el: '#app',
        data: {
          persons: [
            {id: '001', name: '张三', age: 18},
            {id: '002', name: '李四', age: 19},
            {id: '003', name: '王五', age: 20}
          ]
        },
        methods: {
          updateZS(){
            // this.persons[0].name = '张三2'; // 有效，可以修改
            // this.persons[0] = {id: '001', name: '张三2', age: 18}; // 无效，vue没有检测到修改，
            this.persons.splice(0,1,{id: '001', name: '张三2', age: 18}); // 使用数组的替换方法，有效
          }
        }
      })
    </script>

  </body>
</html>